<!--
 * @Author: Badcandy 568197314@qq.com
 * @Date: 2022-12-23 21:09:05
 * @LastEditors: badcandy 568197314@qq.com
 * @LastEditTime: 2023-02-20 16:39:02
 * @FilePath: /dcollege/src/components/messageList/messageList.vue
 * @Description: 消息列表组件
 * 
 * Copyright (c) 2022 by Badcandy 568197314@qq.com, All Rights Reserved. 
-->
<template>
  <div class="messages-list" v-ripple>
    <var-image
      class="message-img"
      fit="fill"
      height="3.4rem"
      width="3.4rem"
      :radius="15"
      :src="imgUrl"
    />
    <div class="message-content">
      <div class="content">
        <span class="message-name">{{ friendName }}</span>
        <span class="message-text">{{ lastMessage }}</span>
      </div>
    </div>
    <div class="message-date">
      <span class="date">{{ lastTime }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "messageList",
  props: {
    friendName: String,
    imgUrl: {
      type: String,
      default: "https://varlet.gitee.io/varlet-ui/cat.jpg",
    },
    lastMessage: {
      type: String,
      default: "",
    },
    lastTime: {
      type: String,
      default: "",
    },
    friendId: String,
  },
});
</script>

<style scoped>
.messages-list {
  display: flex;
  align-items: center;
  height: 4.4rem;
  width: 100%;
}
.message-img {
  display: flex;
  margin-left: 0.8rem;
}
.message-content {
  display: flex;
  margin-left: 0.8rem;
  flex: 1 auto;
}
.content {
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
}
.message-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: #000000;
}
.message-text {
  font-size: 0.9rem;
  margin-top: 0.6rem;
}
.message-date {
  display: flex;
  margin-top: 0.6rem;
  align-self: flex-start;
  margin-right: 0.8rem;
}
.message-date span.date {
  font-size: 0.9rem;
  color: #b8b8b8;
}
</style>
